<template>
 <div id="mmm">
	<div v-for="item in arrList" @click="f1()" class="mm">
		<img :src="item.picUrl">
		<p class="p1 ellipse">{{item.originalMpName}}</p>
		<p class="p2"><i></i><span class="sp1">￥{{item.marketPrice}}</span><span class="sp2" v-if="item.price">￥{{item.price}}</span></p>
	</div>
 </div>
  
</template>

<script>
export default {
 	name:"Mmm",
 	data(){
 		return{
 			arrList:[],
 			arrList1:[],
 			divs:[],
 			hou_div:{},
 			height:0,
 			h:0,
 			flag:false
 		}
 	},
 	created(){
 		
 		this.axios.get("../static/first_img.json").then(data=>{	
 			this.arrList = data.data.data.listObj;
 		},
 		err=>{
 			console.log(err);
 		})
 		//懒加载
 		

 	},
 	methods:{
 		f1(){
 			console.log(this.$el.offsetTop);
 		},	
 		ysHeight(){
 			this.divs = document.getElementsByClassName('mm'); 	
		 	this.hou_div = this.divs[this.divs.length-1];
		 	return this.hou_div.offsetTop
 		}

 	},
 	mounted(){
 		
 	},
 	updated(){
 		
 		var that = this;
 		document.body.onscroll = function(){
 			that.height =that.ysHeight();
 			that.h = document.body.scrollTop + document.documentElement.clientHeight;
 			if(that.h>that.height&&that.arrList1.length==0){
 				that.axios.get("../static/first_img1.json").then(data=>{	
	 				that.arrList1 = data.data.data.listObj;
	 				that.arrList = that.arrList.concat(that.arrList1);
	 				console.log(that.arrList)
		 		},
		 		err=>{
		 			console.log(err);
		 		})
 			}		
 		}
 	}
}
</script>


<style scoped lang="less">
#mmm{
	width: 100%;
	overflow: hidden;
	background: #f5f5f5;
	
	div{
		float: left;
		width: 47%;
		height: 2.55rem;
		background: #fff;
		margin: 0.1rem 0rem 0 0.08rem;
		
		img{
			display: block;
			width: 85%;
			margin:  0 0 0.22rem 0.2rem;
		}
		.p1{
			font-size: .18rem;
			text-indent: 15px;
			height: .25rem;
			line-height: .2rem;
			margin: 0 0 0.05rem 0 ;
		}
		.p2{
			font-size: .18rem;
			text-indent: 13px;
			
			i{
				width: .22rem;
				height: .19rem;
				float: right;
				background: url(../assets/a3.png) no-repeat -1.79rem -2.49rem;
				background-size: 3.75rem;
				margin-right: .1rem;
			}
			.sp1{
				color: #ff6900;
			}
			.sp2{
				font-size: .12rem;
				margin: 0 0 0 .1rem;
				text-decoration: line-through;
			}
		}
	}
}

</style>